<template>
  <div v-if="loading" class="loading-overlay">
    <el-icon class="is-loading" size="30">
      <Loading />
    </el-icon>
    <p>加载数据中...</p>
  </div>

  <div v-else-if="error" class="error-message">
    <el-alert type="error" :title="error" show-icon />
    <el-button @click="fetchData">重试</el-button>
  </div>
  <div class="defaultcontainer" >
    <div class="main" >
      <el-menu
          class="menu no-bottom-border"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">单排/双排</el-menu-item>
        <el-menu-item index="3">灵活</el-menu-item>
        <el-menu-item index="4">极地大乱斗</el-menu-item>
        <el-menu-item index="5">游戏方式</el-menu-item>
      </el-menu>
    </div>

    <div class="sub" >
      <!------------------------ 排位 ---------------------->
      <div class="Rank">
        <div v-for="(ranked, index) in rank">
          <div class="subtitle" >
            <span v-if="ranked.type === 'RANKED_SOLO_5x5'"
                  style="
                  font-size: 100%;
                  font-weight: 520;
                  font-family: 'Arial', sans-serif;
                  ">单排/双排</span>
            <span v-else="ranked.type === 'RANKED_SOLO_5x5'"
                  style="
                  font-size: 100%;
                  font-weight: 520;
                  font-family: 'Arial', sans-serif;
                  ">灵活排位</span>

            <el-tooltip
                class="box-item"
                effect="dark"
                content="在新赛季初，会记录你上赛季的最终段位"
                placement="top-start"
            >
              <el-icon style="color: rgb(113,112,131); padding-left: 5px;" size="15"><Warning /></el-icon>
            </el-tooltip>

          </div>
          <div class="title">
            <el-avatar
                :size="75"
                style="background: rgb(40,40,48); margin: 4%;"
                :src="`https://opgg-static.akamaized.net/images/medals_new/${ranked.tier}.png?image=q_auto:good,f_webp,w_144&amp;v=1751349421`"
            />
            <div class="tier">
              <div class="subtier">
                <a class="tier-text">{{ranked.tier}}</a>
                <a class="tier-text"
                   style=" color: rgb(157,156,171); font-size: 100%;margin-top: 0px" >{{ranked.leaguePoints}} LP</a>

              </div>
              <div class="subtier1">
                <a class="subtier-text">
                  {{ranked.wins}}胜        {{ranked.losses}}败</a>
                <a
                    class="subtier-text"
                >
                  胜率{{ ((ranked.wins / (ranked.wins + ranked.losses)) * 100).toFixed(2) }}%</a>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="Mtitle">
        <a class="subtitle1">
          最近比赛
        </a>
        <div class="title1">
          <div style="height: 100%; width: 18%; display: flex; flex-direction: column; justify-content: flex-start; margin-top: 1.5%">
            <div style="color: rgb(122,116,122); display: flex; justify-content: center" >{{winlossState.total}}场比赛</div>
            <div ref="chartContainer" style="width: 100%; height: 100%; "/>
          </div>
          <div style="width: 40%; height: 100%;   color: rgb(109,111,141);display: flex; flex-direction: column" class="center">
            <div style="font-size: 17px; font-weight: bold;">
              {{(gameData.personalStats.totalKills/gameData.personalStats.matchesPlayed).toFixed(1)}} /
              <a style="color: rgb(192,56,70);">{{(gameData.personalStats.totalDeaths/gameData.personalStats.matchesPlayed).toFixed(1)}}</a>
              / {{(gameData.personalStats.totalAssists/gameData.personalStats.matchesPlayed).toFixed(1)}}
            </div>
            <div style="font-size: 20px; font-weight: bold;color: white">
              {{((gameData.personalStats.totalKills + gameData.personalStats.totalAssists)/  gameData.personalStats.totalDeaths).toFixed(2) }} : 1
            </div>
            <div style="font-size: 14px; font-weight: bold;color:rgb(192,56,70)">
              参与击杀率{{((gameData.personalStats.totalKills/gameData.allPlayersTotalKills) * 100).toFixed(2)}}%
            </div>

          </div>

        </div>
        <!-------------------------------------- 详细 ------------------------------------>
        <div >
          <div v-for="(item, index) in data" :key="index" >
            <template v-if="item.gameMode !== 'CHERRY'">
              <!------------------------ 整体 ---------------------->
              <div :class="item.win ? 'synthetic1' : 'synthetic2'">
                <!------------------------------- 左边沿 ------------------------------->
                <div class="slide"
                     :style="{
                 'background-color': item.win ? 'rgb(83,131,232)' : 'rgb(232,64,87)'}">
                </div>
                <!-------------------------------- 前 ------------------------------------>
                <span class="total">
                <a :class="item.win ? 'total-text1' : 'total-text2'">{{model[item.gameMode]}}</a>
                <a class="total-other">{{timeSate[index].gameCreation}}</a>
                <a class="total-other">————</a>
                <a class="total-other">{{ item.win ? '胜利' : '失败' }}</a>
                <a class="total-other">{{timeSate[index].gameDuration}}</a>
              </span>
                <!-------------------------------- 中 ------------------------------------>
                <div class="middel" >
                  <div style="width: 100%; height: 60%;">
                    <div class="sub-middel">
                      <!--------------------------------------- 英雄头像 ---------------------->
                      <div class="champion-icon-container">
                        <img
                            alt=""
                            loading="lazy"
                            width="48"
                            height="48"
                            decoding="async"
                            data-nimg="1"
                            class="champion-icon"
                            :src="`https://ddragon.leagueoflegends.com/cdn/15.13.1/img/champion/${item.championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto:good,f_webp,w_160,h_160&amp;v=1513`"
                        >
                        <div class="champion-level-badge">
                          {{ item.championLevel }}
                        </div>
                      </div>
                      <!-- -----------------------------------------召唤师技能和符文------------------------->
                      <div style="display: flex; flex-direction: row;">
                        <div style="display: flex; width: 50%; height: 100%; flex-direction: column; margin-left: 15%">
                      <span style="display: block; line-height: 0">
                      <img
                          loading="lazy"
                          width="23"
                          height="23"
                          decoding="async"
                          data-nimg="1"
                          class="rounded size-[18px] md:size-[22px]"
                          :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${item.summoner1}.png`"
                          style="color: transparent;"
                      >
                        </span>
                          <span style="display: block; line-height: 0">
                       <img
                           loading="lazy"
                           width="23"
                           height="23"
                           decoding="async"
                           data-nimg="1"
                           class="rounded size-[18px] md:size-[22px]"
                           :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${item.summoner2}.png`"
                           style="color: transparent;">
                        </span>
                        </div>

                        <div style="display: flex; width: 23px; height: 100%; flex-direction: column;">
                      <span style="display: block; line-height: 0">
                       <img
                           loading="lazy"
                           width="23"
                           height="23"
                           decoding="async"
                           data-nimg="1"
                           class="rounded-full size-[18px] md:size-[22px] bg-black"
                           :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perk/${item.perks.primaryPerk}.png?v=1513`"
                           style="color: transparent;">

                        </span>
                          <span style="display: block; line-height: 0">
                      <img
                          loading="lazy"
                          width="23"
                          height="23"
                          decoding="async"
                          data-nimg="1"
                          class="rounded-full size-[18px] md:size-[22px]"
                          :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perkStyle/${item.perks.subStyle}.png?v=1513`"
                          style="color: transparent;">
                      </span>
                        </div>

                      </div>
                      <!--------------------- -------------------KDA和战绩------------------------->
                      <div class="KDA">
                      <span class="KDA-text">
                            {{item.kills}} /  {{item.deaths}}  / {{item.assists}}
                      </span>
                        <el-popover placement="top-start" trigger="hover" width="200">
                          <template #reference>
                          <span :class="{'KDA-text1': item.deaths !== 0}" style="cursor: pointer; font-weight: 500;color: white; margin-left: 10%">
                            {{ item.deaths !== 0 ? `${item.kda.toFixed(2)} : 1 KDA` : 'Perfect' }}
                          </span>
                          </template>
                          <div style="padding: 8px;">
                            <div style="font-weight: bold; margin-bottom: 6px;">KDA Details</div>
                            <div>Kills: {{item.kills}}</div><div>Deaths: {{item.deaths}}</div><div>Assists: {{item.assists}}</div>
                          </div>
                        </el-popover>
                      </div>
                    </div>
                  </div>
                  <!-------------------------------------------装备------------------------->
                  <div class="items">
                    <template v-for=" (itemId, itemIndex) in item.items">
                      <img
                          v-show="itemId !== 0"
                          loading="lazy"
                          width="22"
                          height="22"
                          decoding="async"
                          data-nimg="1"
                          class="size-[18px]
                       md:size-[22px]
                       rounded border-2
                       border-transparent
                       from-transparent
                       to-transparent
                       bg-[linear-gradient(to_right,#e8ff7b_0%,#83b5ff_40%,#9368ff_60%,#ca76ff_80%,#ca76ff_100%)]
                       bg-clip-border-box box-sizing-border-box"
                          :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/item/${itemId}.png`"
                          style="color: transparent;border-radius: 3px;"
                      >
                      <div v-show="itemId === 0" class="empty-item-slot"></div>
                    </template>
                    <img alt="奥术探测器"
                         loading="lazy"
                         width="22"
                         height="22"
                         decoding="async"
                         data-nimg="1"
                         class="size-[18px]
                         md:size-[22px] rounded-full"
                         src="https://opgg-static.akamaized.net/meta/images/lol/15.13.1/item/3348.png?image=q_auto:good,f_webp,w_64,h_64&amp;v=1513"
                         style="color: transparent;border-radius: 3px">

                  </div>
                </div>
                <!-------------------------------- 后 ---------------------------------------->
                <div  class="final" v-for="members in item.participants" >
                  <div class="backcontainer">
                    <div v-for="(member, index) in members.members" :key="index" >
                      <div style="display: flex; flex-direction: row; align-items: center; gap: 3%; line-height: 150%">
                        <img
                            style="width:20%;
                            height: 20%;
                            color: transparent;"
                            loading="lazy"
                            decoding="async"
                            data-nimg="1"
                            class="rounded-[4px]"
                            :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/champion/${Object.values(member)[0]}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto:good,f_webp,w_160,h_160&amp;v=1513`"
                        >
                        <el-tooltip
                            effect="dark"
                            :content="`${ Object.keys(member)[0] }`"
                            placement="top-start"
                        >

                          <el-text class="textcontainer" truncated>
                            {{ Object.keys(member)[0] }}
                          </el-text>
                        </el-tooltip>
                      </div>
                    </div>

                  </div>
                </div>
                <!-------------------------------- 按钮 ---------------------------------->
                <div class="button-container">
                  <el-button
                      @click="togglePanel(index);changePanel(index)"
                      :class="item.win ? 'custom-btn1' : 'custom-btn2'"
                  >
                    <el-icon><component :is="isOpen[index] ? ArrowUpBold : ArrowDownBold" /></el-icon>
                  </el-button>
                </div>
              </div>

              <!----------------------------- 下列列表 --------------------------------->
              <div>
                <div>
                  <transition name="fade">
                    <div v-show="expandedStates[index]" class="table-wrapper">
                      <div class="tables-container">
                        <div class="switch">
                          <el-button
                              text class="custom-button"
                              @click="activeTable = 1">概述</el-button>
                          <el-button
                              text class="custom-button"
                              @click="activeTable = 2">OP分数</el-button>
                          <el-button
                              text class="custom-button"
                              @click="activeTable = 3">队伍分析</el-button>
                          <el-button
                              text class="custom-button"
                              @click="activeTable = 4">构筑</el-button>
                          <el-button
                              text class="custom-button"
                              @click="activeTable = 5">其他</el-button>
                        </div>


                        <!-----------------------第一表格------------------------------------>

                        <div class="table-group" v-if="activeTable === 1" >
                          <!-----------------------上表格------------------------------------>
                          <div class="th">
                            <div class="details"
                                 style="width: 25%;
                                justify-content: flex-start">
                            <span
                                :class="{
                              'win-style': item.details[0].members[0].win,
                              'lose-style': !item.details[0].members[0].win
                                }"> {{ item.details[0].members[0].win ? '胜利' : '失败' }}
                            </span>
                              (蓝队)
                            </div>
                            <div class="details" style="width: 5%; ">
                              OPSocre
                            </div>
                            <div class="details" style="width: 13%; ">
                              KDA
                            </div>
                            <div class="details" style="width: 16%;">
                              伤害
                            </div>
                            <div class="details" style="width: 8%;">
                              守卫
                            </div>
                            <div class="details" style="width: 8%;">
                              CS
                            </div>
                            <div class="details" style="width: 25%;">
                              <div >
                                道具</div>
                            </div>
                          </div>
                          <div v-for=" (detail, index) in item.details[0].members">
                            <div  :class="{
                              'summary-win': detail.win,
                              'summary-lose': !detail.win,
                                }" >
                              <div
                                  class="details whitetext" style="width: 25%; display: flex; flex-direction: row; justify-content: space-between">
                                <!-----------------------英雄头像和等级------------------------------------>
                                <div class="champion-icon-container1">
                                  <img
                                      alt=""
                                      loading="lazy"
                                      width="48"
                                      height="48"
                                      decoding="async"
                                      data-nimg="1"
                                      class="champion-icon"
                                      :src="`https://ddragon.leagueoflegends.com/cdn/15.13.1/img/champion/${detail.championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto:good,f_webp,w_160,h_160&amp;v=1513`">
                                  <div class="champion-level-badge1">
                                    {{ detail.championLevel }}
                                  </div>
                                </div>
                                <!-----------------------召唤师技能和符文------------------------------------>
                                <div class="summoner-perks-container1">
                                  <div style="
                                    display: flex;
                                    flex-direction: column;
                                    gap: 1px;  /* 控制两个技能图标的间距 */
                                    justify-content: center;
                                  "><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${detail.summoner1}.png`"
                                      style="color: transparent; display: block;"
                                  ><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${detail.summoner2}.png`"
                                      style="color: transparent; display: block;"
                                  ></div>
                                  <div style="
                                display: flex;
                                flex-direction: column;
                                gap: 1px;  /* 控制两个符文图标的间距 */
                                justify-content: center;
                              "><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded-full bg-black"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perk/${detail.perks.primaryPerk}.png?v=1513`"
                                      style="color: transparent; display: block;"
                                  ><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded-full"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perkStyle/${detail.perks.subStyle}.png?v=1513`"
                                      style="color: transparent; display: block;"
                                  ></div></div>
                                <!-----------------------名字段位------------------------------------>
                                <div style="width: 60%; height: 100%;  display: flex; flex-direction: column;">
                                  <div style="font-size: 11px;">
                                    <span>{{detail.gameName}}</span>
                                  </div>
                                </div>
                              </div>
                              <!-----------------------KDA------------------------------------>
                              <div class="details" style="width: 5%; ">
                                OPSCORE
                              </div>
                              <div class="details" style="width: 16%; display: flex; flex-direction: column">
                                <span>{{detail.kills}} / {{detail.deaths}} / {{detail.assists}}</span>
                                <span>{{detail.kda.toFixed(1)}}</span>
                              </div>
                              <!-----------------------伤害承伤------------------------------------>
                              <div class="details" style="width: 13%; display: flex; flex-direction: column">
                                <el-tooltip >
                                  <template #content>
                                <span>
                                  造成伤害 {{detail.totalDamageDealtToChampions}}
                                </span>
                                  </template>
                                  <span>{{detail.totalDamageDealtToChampions}}</span>
                                </el-tooltip>
                                <el-tooltip >
                                  <template #content>
                                    <span>承受伤害 {{detail.totalDamageDealtToChampions}}</span>
                                  </template>
                                  <span>{{detail.totalDamageTaken}}</span>
                                </el-tooltip>

                              </div>

                              <!-----------------------插眼 金钱------------------------------------>
                              <div class="details" style="width: 8%; display: flex; flex-direction: column;">
                                <span>{{detail.visionWardsBoughtInGame}}</span>
                                <span> {{detail.wardsPlaced}} / {{detail.wardsKilled}}</span>
                              </div>
                              <div class="details" style="width: 8%;display: flex; flex-direction: column">
                                <span>{{detail.totalMinionsKilled}}</span>
                                <span>{{(detail.goldEarned / item.gameDuration).toFixed(2)}}</span>
                              </div>

                              <!-----------------------装备------------------------------------>
                              <div class="items1" >
                                <template v-for="subitem in detail.items" >
                                  <img
                                      v-show="subitem !== 0"
                                      loading="lazy"
                                      width="22"
                                      height="22"
                                      decoding="async"
                                      data-nimg="1"
                                      class="size-[18px]
                                 md:size-[22px]
                                 rounded border-2
                                 border-transparent
                                 from-transparent
                                 to-transparent
                                 bg-[linear-gradient(to_right,#e8ff7b_0%,#83b5ff_40%,#9368ff_60%,#ca76ff_80%,#ca76ff_100%)]
                                 bg-clip-border-box box-sizing-border-box"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/item/${subitem}.png`"
                                      style="color: transparent;border-radius: 3px;"
                                  >
                                  <div v-show="subitem === 0" class="empty-item-slot"></div>
                                </template>
                              </div>
                            </div>
                          </div>


                          <div class="switch1">
                            <div
                                class="leftbox"
                                :class="{
                                'winwin': item.details[0].members[0].win,
                                'lossloss': !item.details[0].members[0].win,

                              }"
                            >



                              <!-- Baron -->
                              <div >
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="男爵"
                                    placement="top-start"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="text-main-500">
                                    <path fill="currentColor" fill-rule="nonzero" d="M9 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m0 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-2-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0m5-10 2 4-1 1H9L8 4 7 5H5L4 4l2-4-6 4 2 4 3 8 1-1h4l1 1 3-8 2-4z"></path>
                                  </svg>
                                </el-tooltip>
                                <span class="icontext">{{item.details[0].objectives.baron.kills}}</span>
                              </div>

                              <!-- Dragon -->

                              <div  data-tooltip-content="巨龙">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="巨龙"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="evenodd" d="M8 0 6 4 3 1v4H0l3 3v3l4 5h2l4-5V8l3-3h-3V1l-3 3zm1 11 1-2 2-1-1 2zM4 8l1 2 2 1-1-2z" clip-rule="evenodd"></path>
                                  <mask id="mask0_5762_288546" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type: luminance;">
                                    <path fill="#fff" fill-rule="evenodd" d="M8 0 6 4 3 1v4H0l3 3v3l4 5h2l4-5V8l3-3h-3V1l-3 3zm1 11 1-2 2-1-1 2zM4 8l1 2 2 1-1-2z" clip-rule="evenodd"></path>
                                  </mask>
                                </svg></el-tooltip>
                                <span class="icontext">{{item.details[0].objectives.dragon.kills}}</span>
                              </div>

                              <!-- Herald -->
                              <div  data-tooltip-content="峡谷先锋">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="峡谷先锋"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" class="text-main-500">
                                  <g id="OPGGDesignGuide" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
                                    <g id="GUIDE_03Icon" fill="currentColor" fill-rule="nonzero" transform="translate(-1668 -1020)">
                                      <g id="01-Icon-/-01-lol-/-icon_Herald" transform="translate(1668 1020.167)">
                                        <path id="Combined-Shape" d="M14.286 11.387c1.219.552 1.714 1.599 1.714 1.599-1.155 2.232-2.581 2.351-2.755 2.357h-.018c.345-.39 1.059-3.956 1.059-3.956m-12.572 0s.713 3.565 1.058 3.956c0 0-1.541.023-2.772-2.357 0 0 .494-1.047 1.714-1.6M11.238 1s4.44 2.576 3.75 7.845c0 0-2.048.345-2.163 1.886 0 0-.85 3.382-4.762 3.52H7.93c-3.91-.138-4.762-3.52-4.762-3.52-.115-1.541-2.163-1.886-2.163-1.886C.314 3.576 4.754 1 4.754 1c-1.157 3.41.03 4.182.152 4.25l.01.006c1.09-.805 2.125-1.095 3.032-1.12q.024-.004.048-.002l.048-.002c.907.029 1.942.319 3.033 1.124 0 0 1.38-.667.16-4.256m-.127 7.638c.023-2.83-3.04-2.588-3.163-2.578-.123-.01-3.186-.252-3.163 2.578 0 0 .023 3.393 3.094 3.68h.138c3.07-.287 3.094-3.68 3.094-3.68M7.993 7.073c.571 0 1.034.94 1.034 2.102 0 1.16-.463 2.1-1.034 2.1-.57 0-1.034-.94-1.034-2.1s.463-2.102 1.034-2.102"></path>
                                      </g>
                                    </g>
                                  </g>
                                </svg></el-tooltip>
                                <span class="icontext">{{item.details[0].objectives.riftHerald.kills}}</span>
                              </div>

                              <!-- Atakhan -->
                              <div  data-tooltip-content="阿塔坎">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="厄塔汗"
                                    placement="top-start"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                    <g id="icon_atakhan">
                                      <g id="Union" fill="currentColor">
                                        <path d="M8 0 6.476 3.048l.508 2.54L8 7.11l1.016-1.524.508-2.54zM6.476 5.587l-.508-2.031-2.031-1.524v2.031L2.413 5.587v1.016h1.016L4.952 5.08z"></path>
                                        <path fill-rule="evenodd" d="M4.444 6.095 8 8.127l3.556-2.032 1.015 1.016.508 1.524.508-1.524L16 6.603l-3.429 6.095-1.015 2.54-1.016-1.016v-1.524l-1.524 1.016H6.984L5.46 12.698v1.524l-1.016 1.016-1.015-2.54L0 6.603l2.413.508.508 1.524.508-1.524zm2.032 3.556.508 1.524-2.032-1.016-.508-1.524zm3.048 0-.508 1.524 2.032-1.016.508-1.524z" clip-rule="evenodd"></path>
                                        <path d="m9.524 5.587.508-2.031 2.031-1.524v2.031l1.524 1.524v1.016h-1.016L11.048 5.08z"></path>
                                      </g>
                                    </g>
                                  </svg></el-tooltip>
                                <span class="icontext">1</span>
                              </div>

                              <!-- Void Grubs -->
                              <div class="flex items-center gap-1"  data-tooltip-content="虚空蛆虫">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="虚空潮虫"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="evenodd" d="M8 1 6.333 2.42s-.87.798-1.151.798H3.928c-.928 0-2.261.978-2.557 2.68-.074.429-.098 1.282.56 2.168L1 8.812s1.333.71 1.667 2.131C3 12.363 5.088 13.704 6.9 14.088l1.08.881V15L8 14.985l.019.015v-.031l1.08-.881c1.813-.384 3.901-1.724 4.234-3.145.334-1.42 1.667-2.13 1.667-2.13l-.931-.747c.658-.886.637-1.726.56-2.169-.296-1.701-1.629-2.68-2.557-2.68h-1.254c-.28 0-1.151-.797-1.151-.797zm.149 3.245a.2.2 0 0 0-.298 0L5.434 6.93a.2.2 0 0 0 .021.29c.275.228.818.687 1.007.914.21.255-1.316 1.405-1.862 1.804a.202.202 0 0 0-.026.304l1.84 1.88a.2.2 0 0 0 .285 0l1.158-1.183a.2.2 0 0 1 .286 0L9.3 12.122a.2.2 0 0 0 .286 0l1.84-1.88a.202.202 0 0 0-.026-.304c-.546-.399-2.073-1.549-1.862-1.804.189-.227.732-.686 1.007-.913a.2.2 0 0 0 .021-.29z" clip-rule="evenodd"></path>
                                </svg></el-tooltip>
                                <span class="icontext">0</span>
                              </div>

                              <!-- Towers -->
                              <div class="flex items-center gap-1"  data-tooltip-content="塔">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="塔"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="nonzero" d="m12 8-2 8H6L4 8l4 4zM8 0l4 4-1.003 1.002L11 5h3l-6 6-6-6h2.999L4 4zm0 2.4L6.4 4 8 5.6 9.6 4z"></path>
                                </svg></el-tooltip>
                                <span class="icontext">{{item.details[0].objectives.tower.kills}}</span>
                              </div>

                              <!-- Nexus -->
                              <div class="flex items-center gap-1"  data-tooltip-content="水晶">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="水晶"
                                    placement="top-start"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                    <path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12" clip-rule="evenodd"></path>
                                    <path fill="currentColor" d="m8 4 4 4-4 4-4-4z"></path>
                                  </svg></el-tooltip>
                                <span class="icontext">{{item.details[0].objectives.inhibitor.kills}}</span>
                              </div>
                            </div>


                            <div style="height: 100%; width: 60%;">
                              <KillComparison
                                  style="height: 75%;"
                                  :blue-kills="item.details[0].objectives.champion.kills"
                                  :red-kills="item.details[1].objectives.champion.kills"
                                  :bluegold="item.details[0].totalGold"
                                  :redgold="item.details[1].totalGold"
                                  :match-time="timeSate[index].gameDuration"
                              />
                            </div>


                            <div
                                class="rightbox"
                                :class="{
                                'winwin': item.details[1].members[0].win,
                                'lossloss': !item.details[1].members[0].win,

                              }">
                              <!-- Baron -->
                              <div data-tooltip-content="男爵">

                                <span class="icontext1">{{item.details[1].objectives.baron.kills}}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="男爵"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="nonzero" d="M9 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0m0 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-2-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0m5-10 2 4-1 1H9L8 4 7 5H5L4 4l2-4-6 4 2 4 3 8 1-1h4l1 1 3-8 2-4z"></path>
                                </svg></el-tooltip>
                              </div>

                              <!-- Dragon -->
                              <div class="flex items-center gap-1"  data-tooltip-content="巨龙">

                                <span class="icontext1">{{item.details[1].objectives.dragon.kills}}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="巨龙"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="evenodd" d="M8 0 6 4 3 1v4H0l3 3v3l4 5h2l4-5V8l3-3h-3V1l-3 3zm1 11 1-2 2-1-1 2zM4 8l1 2 2 1-1-2z" clip-rule="evenodd"></path>
                                  <mask id="mask0_5762_288546" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type: luminance;">
                                    <path fill="#fff" fill-rule="evenodd" d="M8 0 6 4 3 1v4H0l3 3v3l4 5h2l4-5V8l3-3h-3V1l-3 3zm1 11 1-2 2-1-1 2zM4 8l1 2 2 1-1-2z" clip-rule="evenodd"></path>
                                  </mask>
                                </svg></el-tooltip>
                              </div>

                              <!-- Herald -->
                              <div class="flex items-center gap-1"  data-tooltip-content="峡谷先锋">

                                <span class="icontext1">{{item.details[1].objectives.riftHerald.kills}}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="峡谷先锋"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" class="text-main-500">
                                  <g id="OPGGDesignGuide" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
                                    <g id="GUIDE_03Icon" fill="currentColor" fill-rule="nonzero" transform="translate(-1668 -1020)">
                                      <g id="01-Icon-/-01-lol-/-icon_Herald" transform="translate(1668 1020.167)">
                                        <path id="Combined-Shape" d="M14.286 11.387c1.219.552 1.714 1.599 1.714 1.599-1.155 2.232-2.581 2.351-2.755 2.357h-.018c.345-.39 1.059-3.956 1.059-3.956m-12.572 0s.713 3.565 1.058 3.956c0 0-1.541.023-2.772-2.357 0 0 .494-1.047 1.714-1.6M11.238 1s4.44 2.576 3.75 7.845c0 0-2.048.345-2.163 1.886 0 0-.85 3.382-4.762 3.52H7.93c-3.91-.138-4.762-3.52-4.762-3.52-.115-1.541-2.163-1.886-2.163-1.886C.314 3.576 4.754 1 4.754 1c-1.157 3.41.03 4.182.152 4.25l.01.006c1.09-.805 2.125-1.095 3.032-1.12q.024-.004.048-.002l.048-.002c.907.029 1.942.319 3.033 1.124 0 0 1.38-.667.16-4.256m-.127 7.638c.023-2.83-3.04-2.588-3.163-2.578-.123-.01-3.186-.252-3.163 2.578 0 0 .023 3.393 3.094 3.68h.138c3.07-.287 3.094-3.68 3.094-3.68M7.993 7.073c.571 0 1.034.94 1.034 2.102 0 1.16-.463 2.1-1.034 2.1-.57 0-1.034-.94-1.034-2.1s.463-2.102 1.034-2.102"></path>
                                      </g>
                                    </g>
                                  </g>
                                </svg></el-tooltip>
                              </div>

                              <!-- Atakhan -->
                              <div class="flex items-center gap-1"  data-tooltip-content="阿塔坎">
                                <span class="icontext1">0</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="厄塔汗"
                                    placement="top-start"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                    <g id="icon_atakhan">
                                      <g id="Union" fill="currentColor">
                                        <path d="M8 0 6.476 3.048l.508 2.54L8 7.11l1.016-1.524.508-2.54zM6.476 5.587l-.508-2.031-2.031-1.524v2.031L2.413 5.587v1.016h1.016L4.952 5.08z"></path>
                                        <path fill-rule="evenodd" d="M4.444 6.095 8 8.127l3.556-2.032 1.015 1.016.508 1.524.508-1.524L16 6.603l-3.429 6.095-1.015 2.54-1.016-1.016v-1.524l-1.524 1.016H6.984L5.46 12.698v1.524l-1.016 1.016-1.015-2.54L0 6.603l2.413.508.508 1.524.508-1.524zm2.032 3.556.508 1.524-2.032-1.016-.508-1.524zm3.048 0-.508 1.524 2.032-1.016.508-1.524z" clip-rule="evenodd"></path>
                                        <path d="m9.524 5.587.508-2.031 2.031-1.524v2.031l1.524 1.524v1.016h-1.016L11.048 5.08z"></path>
                                      </g>
                                    </g>
                                  </svg></el-tooltip>
                              </div>

                              <!-- Void Grubs -->
                              <div class="flex items-center gap-1"  data-tooltip-content="虚空蛆虫">
                                <span class="icontext1">0</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="虚空潮虫"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="evenodd" d="M8 1 6.333 2.42s-.87.798-1.151.798H3.928c-.928 0-2.261.978-2.557 2.68-.074.429-.098 1.282.56 2.168L1 8.812s1.333.71 1.667 2.131C3 12.363 5.088 13.704 6.9 14.088l1.08.881V15L8 14.985l.019.015v-.031l1.08-.881c1.813-.384 3.901-1.724 4.234-3.145.334-1.42 1.667-2.13 1.667-2.13l-.931-.747c.658-.886.637-1.726.56-2.169-.296-1.701-1.629-2.68-2.557-2.68h-1.254c-.28 0-1.151-.797-1.151-.797zm.149 3.245a.2.2 0 0 0-.298 0L5.434 6.93a.2.2 0 0 0 .021.29c.275.228.818.687 1.007.914.21.255-1.316 1.405-1.862 1.804a.202.202 0 0 0-.026.304l1.84 1.88a.2.2 0 0 0 .285 0l1.158-1.183a.2.2 0 0 1 .286 0L9.3 12.122a.2.2 0 0 0 .286 0l1.84-1.88a.202.202 0 0 0-.026-.304c-.546-.399-2.073-1.549-1.862-1.804.189-.227.732-.686 1.007-.913a.2.2 0 0 0 .021-.29z" clip-rule="evenodd"></path>
                                </svg></el-tooltip>
                              </div>

                              <!-- Towers -->
                              <div class="flex items-center gap-1"  data-tooltip-content="塔">
                                <span class="icontext1">{{item.details[1].objectives.tower.kills}}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="塔"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="nonzero" d="m12 8-2 8H6L4 8l4 4zM8 0l4 4-1.003 1.002L11 5h3l-6 6-6-6h2.999L4 4zm0 2.4L6.4 4 8 5.6 9.6 4z"></path>
                                </svg></el-tooltip>
                              </div>

                              <!-- Nexus -->
                              <div class="flex items-center gap-1"  data-tooltip-content="水晶">
                                <span class="icontext1">{{item.details[1].objectives.inhibitor.kills}}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="水晶"
                                    placement="top-start"
                                ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" class="text-main-500">
                                  <path fill="currentColor" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12" clip-rule="evenodd"></path>
                                  <path fill="currentColor" d="m8 4 4 4-4 4-4-4z"></path>
                                </svg></el-tooltip>
                              </div>

                            </div>
                          </div>


                          <!-----------------------下表格------------------------------------>
                          <div class="th">
                            <div class="details"
                                 style="width: 25%;
                               justify-content: flex-start"
                            >
                            <span
                                :class="{
                                'win-style': item.details[1].members[0].win,
                                'lose-style': !item.details[1].members[0].win
                                }">
                              {{ item.details[1].members[0].win ? '胜利' : '失败' }}
                            </span>
                              (红队)
                            </div>
                            <div class="details" style="width: 5%; ">
                              OPSocre
                            </div>
                            <div class="details" style="width: 13%; ">
                              KDA
                            </div>
                            <div class="details" style="width: 16%;">
                              伤害
                            </div>
                            <div class="details" style="width: 8%;">
                              守卫
                            </div>
                            <div class="details" style="width: 8%;">
                              CS
                            </div>
                            <div class="details" style="width: 25%;">
                              <div  >
                                道具</div>
                            </div>
                          </div>
                          <div v-for=" (detail, index) in item.details[1].members">
                            <div
                                :class="{
                              'summary-win': detail.win,
                              'summary-lose': !detail.win,
                                }" >
                              <div
                                  class="details whitetext" style="width: 25%; display: flex; flex-direction: row; justify-content: space-between">
                                <!-----------------------英雄头像和等级------------------------------------>
                                <div class="champion-icon-container1">
                                  <img
                                      alt=""
                                      loading="lazy"
                                      width="48"
                                      height="48"
                                      decoding="async"
                                      data-nimg="1"
                                      class="champion-icon"
                                      :src="`https://ddragon.leagueoflegends.com/cdn/15.13.1/img/champion/${detail.championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto:good,f_webp,w_160,h_160&amp;v=1513`">
                                  <div class="champion-level-badge1">
                                    {{ detail.championLevel }}
                                  </div>
                                </div>
                                <!-----------------------召唤师技能和符文------------------------------------>
                                <div class="summoner-perks-container1">
                                  <div style="
                                    display: flex;
                                    flex-direction: column;
                                    gap: 1px;  /* 控制两个技能图标的间距 */
                                    justify-content: center;
                                  "><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${detail.summoner1}.png`"
                                      style="color: transparent; display: block;"
                                  ><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/spell/${detail.summoner2}.png`"
                                      style="color: transparent; display: block;"
                                  ></div>
                                  <div style="
                                display: flex;
                                flex-direction: column;
                                gap: 1px;  /* 控制两个符文图标的间距 */
                                justify-content: center;
                              "><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded-full bg-black"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perk/${detail.perks.primaryPerk}.png?v=1513`"
                                      style="color: transparent; display: block;"
                                  ><img
                                      loading="lazy"
                                      width="16"
                                      height="16"
                                      decoding="async"
                                      data-nimg="1"
                                      class="rounded-full"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.12.1/perkStyle/${detail.perks.subStyle}.png?v=1513`"
                                      style="color: transparent; display: block;"
                                  ></div></div>
                                <!-----------------------名字段位------------------------------------>
                                <div style="width: 60%; height: 100%;  display: flex; flex-direction: column;">
                                  <div style="font-size: 11px;">
                                    <span>{{detail.gameName}}</span>
                                  </div>
                                </div>
                              </div>
                              <div class="details c" style="width: 5%;">
                                OPSCORE
                              </div>
                              <div class="details" style="width: 13%; display: flex; flex-direction: column">
                                <span>{{detail.kills}} / {{detail.deaths}} / {{detail.assists}}</span>
                                <span>{{detail.kda.toFixed(1)}}</span>
                              </div>
                              <div class="details" style="width: 16%; display: flex; flex-direction: column">
                                <el-tooltip >
                                  <template #content>
                                    <span>造成伤害 {{detail.totalDamageDealtToChampions}}</span>
                                  </template>
                                  <span>{{detail.totalDamageDealtToChampions}}</span>
                                </el-tooltip>
                                <el-tooltip >
                                  <template #content>
                                    <span>承受伤害 {{detail.totalDamageDealtToChampions}} </span>
                                  </template>
                                  <span>{{detail.totalDamageTaken}}</span>
                                </el-tooltip>

                              </div>
                              <div class="details" style="width: 8%; display: flex; flex-direction: column;">
                                <span>{{detail.visionWardsBoughtInGame}}</span>
                                <span> {{detail.wardsPlaced}} / {{detail.wardsKilled}}</span>
                              </div>
                              <div class="details" style="width: 8%;display: flex; flex-direction: column">
                                <span>{{detail.totalMinionsKilled}}</span>
                                <span>{{detail.goldEarned}}</span>
                              </div>
                              <div class="items1" >
                                <template v-for="subitem in detail.items" >
                                  <img
                                      v-show="subitem !== 0"
                                      loading="lazy"
                                      width="22"
                                      height="22"
                                      decoding="async"
                                      data-nimg="1"
                                      class="size-[18px]
                                 md:size-[22px]
                                 rounded border-2
                                 border-transparent
                                 from-transparent
                                 to-transparent
                                 bg-[linear-gradient(to_right,#e8ff7b_0%,#83b5ff_40%,#9368ff_60%,#ca76ff_80%,#ca76ff_100%)]
                                 bg-clip-border-box box-sizing-border-box"
                                      :src="`https://opgg-static.akamaized.net/meta/images/lol/15.13.1/item/${subitem}.png`"
                                      style="color: transparent;border-radius: 3px;"
                                  >
                                  <div v-show="subitem === 0" class="empty-item-slot"></div>
                                </template>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-----------------------第二表格------------------------------------>
                        <div class="table-group" v-if="activeTable === 2">

                          <div class="subtitle" >
                          <span style="color: #feffff">
                            {{gameData}}
                            {{positionStats}}
                        </span>
                          </div>

                        </div>
                        <!-----------------------第三表格------------------------------------>
                        <div class="table-group"  v-if="activeTable === 3">
                          <div style=" width: 100%;height: 4vh;  color: white; background-color: rgb(49,49,60); margin-bottom: 1px; border-radius: 2px; font-size: 15px; font-weight: bold  " class="center">
                            比赛分析
                          </div>
                          <div style="  width: 100%;height: 100%; background-color: rgb(49,49,60);">
                            <div style="  width: 100%;height: 100%;  display: flex; flex-direction: row; justify-content: space-between; ">
                              <div style="  width: 48%;height: 100%; display: flex; flex-direction: column;">
                                <!-----------------------击杀数表格------------------------------------>
                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center;">
                                  <metric-pie
                                      title="击杀数"
                                      :blue-value="matchStats[index].blueTeam.kills"
                                      :red-value="matchStats[index].redTeam.kills"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="kills"
                                  />
                                </div>

                                <!-----------------------金币------------------------------------>
                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center; ">
                                  <metric-pie
                                      title="伤害"
                                      :blue-value="matchStats[index].blueTeam.damageDealt"
                                      :red-value="matchStats[index].redTeam.damageDealt"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="damageDealt"
                                  />
                                </div>
                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center; ">
                                  <metric-pie
                                      title="承伤"
                                      :blue-value="matchStats[index].blueTeam.damageTaken"
                                      :red-value="matchStats[index].redTeam.damageTaken"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="damageTaken"
                                  />
                                </div>
                              </div>
                              <div style="  width: 48%;height: 100%; display: flex; flex-direction: column;">

                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center;">
                                  <metric-pie
                                      title="金币"
                                      :blue-value="matchStats[index].blueTeam.gold"
                                      :red-value="matchStats[index].redTeam.gold"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="gold"
                                  />
                                </div>

                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center; ">
                                  <metric-pie
                                      title="守卫"
                                      :blue-value="matchStats[index].blueTeam.wards"
                                      :red-value="matchStats[index].redTeam.wards"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="wards"
                                  />
                                </div>
                                <div style="width: 100%;height: 30%; display: flex; align-content: center; justify-content: center; ">
                                  <metric-pie
                                      title="补兵"
                                      :blue-value="matchStats[index].blueTeam.minions"
                                      :red-value="matchStats[index].redTeam.minions"
                                      :blue-players="item.details[0].members"
                                      :red-players="item.details[1].members"
                                      stat-key="minions"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-----------------------第四表格------------------------------------>
                        <div class="table-group" v-if="activeTable === 4">

                          <div class="subtitle" >
                          <span style="color: #feffff">
                          第四表格
                        </span>
                          </div>

                        </div>
                        <!-----------------------第五表格------------------------------------>
                        <div class="table-group" v-if="activeTable === 5">

                          <div class="subtitle" >
                          <span style="color: #feffff">
                          第五表格
                        </span>
                          </div>

                        </div>
                      </div>
                    </div>
                  </transition>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { ArrowDownBold, ArrowUpBold, Warning } from '@element-plus/icons-vue';
import { useRoute } from "vue-router";
import request from '@/utils/request';
import * as echarts from 'echarts';
import KillComparison from '@/components/KillComparison.vue'
import MetricPie from '@/components/MetricPie.vue'

const route = useRoute();
const isOpen = ref({});
const expandedStates = ref([]);
const activeTable = ref(1);
const loading = ref(true);
const error = ref<string | null>(null);

// 初始化所有响应式数据
const rank = ref<any[]>([]);

const model = ref({
  ARAM: "极地大乱斗",
  CLASSIC: "召唤师峡谷",
  CHERY: "斗魂竞技场"
});

const data = ref<any[]>([]);
const timeSate = ref<any[]>([]);
const winlossState = ref({ win: 0, loss: 0, total: 0 });
const gameData = ref({ personalStats: {}, allPlayersTotalKills: 0 });
const matchStats = ref<any[]>([]);
const positionStats = ref<any>({});

// 图表相关
const chartContainer = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 导航方法
const changePanel = (index: number) => {
  isOpen.value[index] = !isOpen.value[index];
};

// 切换面板展开状态
const togglePanel = (index: number) => {
  expandedStates.value[index] = !expandedStates.value[index];
};

// 时间格式化函数
function formatTimeAgo(timestamp: number) {
  const now = Date.now();
  const diff = now - timestamp;

  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) return `${days}天前`;
  if (hours > 0) return `${hours}小时前`;
  if (minutes > 0) return `${minutes}分钟前`;
  return "刚刚";
}

// 游戏时长格式化
function formatGameDuration(seconds: number) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}分钟${secs}秒`;
}

// 处理比赛时间数据
function processMatchData(data: any[]) {
  return data.map(item => ({
    ...item,
    gameCreation: formatTimeAgo(item.gameCreation),
    gameDuration: formatGameDuration(item.gameDuration)
  }));
}

// 统计胜负数据
function countWinLossStats(matches: any[]) {
  let wins = 0;
  let losses = 0;

  matches.forEach(match => {
    if (match.win) {
      wins++;
    } else {
      losses++;
    }
  });

  return {
    win: wins,
    loss: losses,
    total: wins + losses
  };
}

// 计算玩家统计数据
function calculatePlayerStats(matches: any[], targetGameName: string, targetTagLine: string) {
  let personalStats = {
    totalKills: 0,
    totalDeaths: 0,
    totalAssists: 0,
    matchesPlayed: 0
  };

  let allPlayersTotalKills = 0;

  matches.forEach(match => {
    if (!match.details || match.details.length === 0) return;

    for (const team of match.details) {
      if (!team.members || team.members.length === 0) continue;

      for (const player of team.members) {
        if (player.kills !== undefined) {
          allPlayersTotalKills += player.kills;
        }

        if (player.gameName === targetGameName && player.tagLine === targetTagLine) {
          personalStats.totalKills += player.kills || 0;
          personalStats.totalDeaths += player.deaths || 0;
          personalStats.totalAssists += player.assists || 0;
          personalStats.matchesPlayed++;
        }
      }
    }
  });

  return {
    personalStats,
    allPlayersTotalKills
  };
}

// 统计玩家位置选择
function countPlayerPositionPicks(matches: any[], playerName: string) {
  const positionCount = {
    TOP: 0,
    JUNGLE: 0,
    MIDDLE: 0,
    BOTTOM: 0,
    UTILITY: 0,
  };

  matches.forEach(match => {
    if (match.details && match.details.length >= 2) {
      for (const team of match.details) {
        if (team.members) {
          for (const player of team.members) {
            if (player.gameName === playerName && player.teamPosition) {
              positionCount[player.teamPosition as keyof typeof positionCount]++;
              break;
            }
          }
        }
      }
    }
  });

  return positionCount;
}

// 提取比赛统计数据
function extractMatchStats(matches: any[]) {
  return matches.map(match => {
    const blueTeam = { teamId: 100, kills: 0, damageDealt: 0, damageTaken: 0, gold: 0, wards: 0, minions: 0 };
    const redTeam = { teamId: 200, kills: 0, damageDealt: 0, damageTaken: 0, gold: 0, wards: 0, minions: 0 };

    if (match.details && match.details.length >= 2) {
      match.details.forEach((team: any) => {
        const isBlue = team.teamId === 100;
        const currentTeam = isBlue ? blueTeam : redTeam;

        currentTeam.gold = team.totalGold || 0;

        if (team.members) {
          team.members.forEach((player: any) => {
            currentTeam.kills += player.kills || 0;
            currentTeam.damageDealt += player.totalDamageDealtToChampions || 0;
            currentTeam.damageTaken += player.totalDamageTaken || 0;
            currentTeam.wards += (player.wardsPlaced || 0) + (player.visionWardsBoughtInGame || 0);
            currentTeam.minions += player.totalMinionsKilled || 0;
          });
        }
      });
    }

    const totalKills = blueTeam.kills + redTeam.kills;
    const totalDamageDealt = blueTeam.damageDealt + redTeam.damageDealt;
    const totalDamageTaken = blueTeam.damageTaken + redTeam.damageTaken;
    const totalGold = blueTeam.gold + redTeam.gold;
    const totalWards = blueTeam.wards + redTeam.wards;
    const totalMinions = blueTeam.minions + redTeam.minions;

    return {
      matchId: match.matchId,
      blueTeam,
      redTeam,
      totals: {
        kills: totalKills,
        damageDealt: totalDamageDealt,
        damageTaken: totalDamageTaken,
        gold: totalGold,
        wards: totalWards,
        minions: totalMinions
      }
    };
  });
}

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return;

  // 销毁现有实例
  if (chartInstance) {
    chartInstance.dispose();
  }

  chartInstance = echarts.init(chartContainer.value);

  const option = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '场次',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          formatter: winlossState.value.total > 0
              ? `${((winlossState.value.win / winlossState.value.total) * 100).toFixed(0)}%`
              : '0%',
          show: true,
          position: 'center',
          color: 'rgb(83,131,232)',
          fontSize: 12,
          fontWeight: 'bold',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 15,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true
        },
        data: [
          {
            value: winlossState.value.win,
            name: `胜利:${winlossState.value.win}`,
            itemStyle: { color: 'rgb(83,131,232)' },
          },
          {
            value: winlossState.value.loss,
            name: `失败:${winlossState.value.loss}`,
            itemStyle: { color: 'rgb(232,64,87)' }
          },
        ]
      }
    ]
  };

  chartInstance.setOption(option);
};

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

const playerData = {
  puuid: route.query.puuid,
  serverRegion: route.query.serverRegion,
  gameName: route.query.gameName,
  tagLine: route.query.tagLine
};

// 加载数据
const fetchData = async () => {
  try {
    loading.value = true;
    error.value = null;

    if (!playerData.puuid || !playerData.serverRegion) {
      throw new Error("缺少玩家参数");
    }

    const response = await request.get(
        `riot/match/overviews/${playerData.serverRegion}/${playerData.puuid}`
    );

    const response1 = await request.get(
        `riot/rank/info/${playerData.serverRegion}/${playerData.puuid}`
    );

    if (!response1.data || !Array.isArray(response1.data)) {
      throw new Error("无效的响应数据");
    }

    if (!response.data || !Array.isArray(response.data)) {
      throw new Error("无效的响应数据");
    }

    data.value = response.data;
    rank.value = response1.data;
    // 初始化展开状态
    data.value.forEach((_, index) => {
      expandedStates.value[index] = false;
    });

    // 计算各种统计数据
    timeSate.value = processMatchData(extractGameTimeStats(data.value));
    winlossState.value = countWinLossStats(data.value);
    matchStats.value = extractMatchStats(data.value);

    // 计算玩家数据
    gameData.value = calculatePlayerStats(
        data.value,
        playerData.gameName.toString(),
        playerData.tagLine.toString()
    );

    positionStats.value = countPlayerPositionPicks(
        data.value,
        playerData.gameName.toString()
    );

    // 等待DOM更新后初始化图表
    await nextTick();
    initChart();

  } catch (err: any) {
    console.error("加载数据失败:", err);
    error.value = `加载数据失败: ${err.message || '未知错误'}`;
  } finally {
    loading.value = false;
  }
};

// 辅助函数：提取游戏时间数据
function extractGameTimeStats(matches: any[]) {
  return matches.map(match => ({
    matchId: match.matchId,
    gameCreation: match.gameCreation,
    gameDuration: match.gameDuration
  }));
}

// 组件挂载时加载数据
onMounted(() => {
  fetchData();
  // 添加窗口大小变化监听
  window.addEventListener('resize', resizeChart);
});

// 组件卸载时清理
onMounted(() => {
  return () => {
    window.removeEventListener('resize', resizeChart);
    if (chartInstance) {
      chartInstance.dispose();
    }
  };
});

// 当关键数据变化时重新渲染图表
watch([winlossState, chartContainer], () => {
  if (winlossState.value.total > 0 && chartContainer.value) {
    initChart();
  }
}, { deep: true });
</script>




<style scoped>

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
}
.error-message {
  padding: 20px;
  text-align: center;
}

.defaultcontainer {
  display: flex;          /* 启用 Flexbox */
  justify-content: center; /* 水平居中 */
  width: 100vw;
  height: 100vh;
  margin-top: 27px;
  flex-direction: column;
}

.main {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  width: 100vw;
}

.menu {
  margin-bottom: 10px;
  border-radius: 1px;
  width: 57%;
  height: 50px;
  background-color:rgb(49,49,60);
  margin-top: 7px;
  align-content: center;
  justify-content: center;
  margin-right: 0.5%;
}

.sub {
  display: flex;          /* 启用 Flexbox 横向排列 */
  flex-direction: row;    /* 默认是 row，可省略 */
  justify-content: space-between; /* 让子元素两端对齐 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 5px;              /* 子元素之间的间距 */
  width: 100%;
  height: 100vh;
  margin-top: -20px;
  padding: 5px;          /* 可选：增加内边距 */
}

.Rank {

  width: 20%;            /* 调整宽度 */
  height: 70%;
  margin-top: 4px;
  margin-left: 21%;
}
.subtitle{
  color: #feffff;
  width: 100%;
  height: 6%;
  background-color:rgb(49,49,60);
  margin-top: 6px;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  text-indent: 20px;
  line-height: 40px;
}
.title{
  background-color: rgb(49,49,60);
  height: 23%;
  width: 100%;
  border-radius: 1px;
  display: flex;
  flex-direction: row;
  margin-top: 0.37%;
}

.title1{
  background-color: rgb(49,49,60);
  height: 7%;
  width: 100%;
  border-radius: 1px;
  display: flex;
  flex-direction: row;
  margin-top: 0.17%;

}
.subtitle1{
  color: #feffff;
  width: 100%;
  height: 1.75%;
  background-color:rgb(49,49,60);
  margin-top: 6px;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  font-size: 15px;
}
.Mtitle {
  display: flex; /* 添加这一行 */
  flex-direction: column;
  width: 45%;
  height: 250%;
  margin-right:22%;
  margin-top: 5px;
}
.tier{

  width: 80%;
  height: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}
.subtier{

  width: 65%;
  height: 70%;
  flex-direction: column;
  display: flex;
  color: #feffff;
  gap: 10px;

}
.tier-text{
  font-size: 150%;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  margin-top: 10%;
}
.subtier1{

  width: 40%;
  height: 70%;
  flex-direction: column;
  display: flex;
  color: #feffff;
  gap: 10px;
  margin-left: 10%;
}
.subtier-text{
  margin-left: 10%;
  color: rgb(157,156,171);
  font-size: 85%;
  font-weight: 520;
  font-family: 'Arial', sans-serif;margin-top: 4%;
}

.synthetic1 {
  background-color: rgb(40,52,78);
  width: 100%;
  height: 11vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 10px;
  border-radius: 5px;
}
.synthetic2 {
  position: relative;

  background-color: rgb(89,52,59);
  width: 100%;
  height: 11vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  margin-top: 10px;
  border-radius: 5px;
}
.table-wrapper {
  width: 100%;
  margin-top: 10px; /* 表格与按钮间距 */
  transition: all 0.3s ease;
}
/* 过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: all 0.3s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
/* 添加到style部分 */

.no-bottom-border.el-menu--horizontal {
  border-bottom: none !important;
}

.custom-btn1 {
  width: 100%;
  height: 100%;
  /* 默认状态 */
  --el-button-text-color:rgb(78,123,216);         /* 文字颜色 */
  --el-button-bg-color: rgb(47,67,110);           /* 背景色 */
  --el-button-border-color: rgb(47,67,110);       /* 边框色 */

  /* 悬停状态 */
  --el-button-hover-text-color:rgb(78,123,216);
  --el-button-hover-bg-color: rgb(40,52,78);
  --el-button-hover-border-color: rgb(40,52,78);

  /* 点击状态 */
  --el-button-active-text-color: rgb(78,123,216);
  --el-button-active-bg-color: #3a8ee6;
  --el-button-active-border-color: #3a8ee6;

  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.custom-btn2 {
  width: 100%;
  height: 100%;
  /* 默认状态 */
  --el-button-text-color:rgb(500,60,71);         /* 文字颜色 */
  --el-button-bg-color: rgb(112,60,71);           /* 背景色 */
  --el-button-border-color: rgb(112,60,71);       /* 边框色 */

  /* 悬停状态 */
  --el-button-hover-text-color:rgb(500,60,71);
  --el-button-hover-bg-color: rgb(90,60,71);
  --el-button-hover-border-color: rgb(90,60,71);

  /* 点击状态 */
  --el-button-active-text-color: rgb(112,60,71);
  --el-button-active-bg-color: rgb(112,60,71);
  --el-button-active-border-color: rgb(112,60,71);

  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.custom-button {
  color: white !important; /* 文字颜色设为白色 */
}

/* 鼠标悬停效果 */
.custom-button:hover {
  background-color: rgba(128, 128, 128, 0.2) !important; /* 半透明灰色背景 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.empty-item-slot {
  width: 22px;
  height: 22px;
  background-color: rgb(254,78,80, 0.7);

}
.slide {
  background-color: rgb(83,131,232);
  display: flex;
  width: 1%;
  height: 100%;
  align-self: flex-start; /* 添加这一行 */
  border-bottom-left-radius: 10px;
  border-top-left-radius: 5px;
}
.total{
  position: relative;
  height: 100%;
  width: 17%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  margin-left: 1%;
}
.total-text1{
  position: relative;
  color: rgb(83,131,232);
  font-size: 105%; /* 字体大小 */
  font-weight: 550; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}
.total-text2{
  position: relative;
  color: rgb(222,59,69);
  font-size: 105%; /* 字体大小 */
  font-weight: 550; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}
.total-other{
  color: rgb(157,155,171);
}


.middel{
  height: 100%;
  width: 54.6%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
.champion-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  color: transparent;
}
.champion-level-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 20px;
  height: 20px;
  background-color: #1a1a2e;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.sub-middel{
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  margin-left: 1%;
}
.KDA{
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.KDA-text{
  color: #ffffff;
  /* 字体样式 */
  font-family: 'Microsoft Yahei'; /* 可替换为其他字体 */
  font-size: 105%; /* 字体大小 */
  font-weight: 550; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
  margin-left: 10%;
}
.KDA-text1{
  color: rgb(158,158,177);
  /* 字体样式 */
  font-family: 'Microsoft Yahei'; /* 可替换为其他字体 */
  font-size: 85%; /* 字体大小 */
  font-weight: 300; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
  margin-left: 12%;
  margin-top: 2%;
}
.items{
  position: relative;
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-items: center;
  gap: 0.5%
}
.final {
  width: 10%;
  height: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  padding: 0 0.25%; /* 左右内边距，控制间隔 */
}
.button-container {
  background-color: rgb(47,67,110);
  display: flex;
  justify-content: flex-end; /* 按钮靠右 */
  align-items: end;
  width: 7%;
  height: 100%;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.backcontainer{
  width: 100%;
  height: 85%;
  margin-bottom: 50%;
}
.textcontainer{
  color: rgb(207,205,231);
  font-size: 90%;
  width: 70%;
  height: 10%;
  font-weight: 15; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}
.champion-icon-container {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
}
.empty-item-slot{
  width: 22px;
  height: 23px;
  border-radius: 5px;
}
.switch{
  color: #feffff;
  width: 100%;
  height: 4vh;
  background-color:rgb(49,49,60);
  border-radius: 5px;
  margin: 0 auto;
  display: flex;                  /* Enable flexbox */
  justify-content: center;        /* Center horizontally */
  align-items: center;
}
.custom-button {
  color: white !important; /* 文字颜色设为白色 */
  width: 18%;

}
.tables-container {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 3px; /* 控制两个表格之间的间距 */
}
.table-group {
  width: auto;
  height: auto;
}
.table-wrapper {
  width: 100%;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.th{
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  width: 100%;
  height: 35px;
  background-color: rgb(49,49,60);
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  gap:2px;
  margin-bottom: 1px;
}
.summary-win{
  width: 100%;
  background-color: rgb(40,52,78);
  height: 37px;
  gap:2px;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
}
.summary-lose{
  width: 100%;
  background-color: rgb(89,52,59);
  height: 37px;
  gap:2px;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
}
.details {
  width: 14%;
  height: 90%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: 1.5%;
  color: rgb(160,162,182);
  font-size: 12px;
}

.win-style{
  font-size: 13px;
  font-weight: 600;
  color: rgb(83,131,232);
}
.lose-style{
  font-size: 13px;
  font-weight: 600;
  color: rgb(251,62,83);
}

.details-text {
  color: #feffff;
  font-size: 13px;
  display: flex;
  align-content: center;     /* 垂直居中（如果文本多行） */
  justify-content: center; /* 水平居中 */
  text-align: center;      /* 文本水平居中（备用） */
}
.items1{
  position: relative;
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-items: center;
  gap: 0.5%
}

.champion-icon-container1 {
  position: relative;
  display: inline-block;
  width: 18%;
  height: auto;
}
.champion-level-badge1 {
  position: absolute;
  right: -3px;
  bottom: 0px;
  width: 60%;
  height: auto;
  background-color: #1a1a2e;
  border-radius: 50%;
  color: white;
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.whitetext{
  color:white;
}
.summoner-perks-container1{
  display: flex;
  flex-direction: row;

  justify-content: space-between;
  align-items: center;  /* 新增：垂直居中 */
  width: 18%;
  height: 90%;
  padding: 2px;  /* 新增：内部留白 */
  box-sizing: border-box;
}

.switch1{
  color: #feffff;
  width: 100%;
  height: 7.5vh;
  background-color:rgb(40,40,48);
  border-radius: 1px;
  display: flex;                  /* Enable flexbox */
  justify-content: space-between;        /* Center horizontally */
  align-items: flex-start;
  margin-top: 3px;
  margin-bottom: 3px;
}

.demo-progress .el-progress--line {
  width: 10px;
}

.winwin{
  color: rgb(83,131,232);
}
.lossloss{
  color: rgb(232,64,87);
}

.iconbox {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中（替换了align-content） */
  width: 100%;
  height: 50%;             /* 确保父容器有明确高度 */
  gap: 10px;               /* 元素间距 */
  flex-wrap: wrap;         /* 允许换行（如果内容过多） */
}

.icontext{
  margin-left: 5px;
}
.icontext1{
  margin-right: 5px;
}
.rightbox{

  width: 20%;
  flex-direction: row;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap:5px;
  margin-right: 2%;
}
.leftbox{
  width: 20%;
  flex-direction: row;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  gap:5px;
  margin-left: 2%;
}

.center {
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  text-align: center;     /* 文本居中（对flex子元素的文本也有效） */
}
</style>